<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="aside-box" width="150px">
      <el-menu :default-active="activePath" class="aside" :unique-opened="true" :router="true" :collapse="false"
        background-color="#263238" text-color="rgba(163, 175, 183, .9)" active-text-color="#fff">
        <div v-for="item in routerPath" :key="item.id">
          <el-submenu :index="item.path" v-if="item.children.length > 0">
            <template slot="title">{{ item.title }}</template>
            <div v-for="item in item.children" :key="item.id">
              <el-menu-item :href="item.path" v-if="item.type === 2" :index="item.path">{{ item.title }} </el-menu-item>
            </div>
          </el-submenu>

          <el-menu-item v-else :index="item.path">{{ item.title }}</el-menu-item>
        </div>
      </el-menu>
    </el-aside>
    <!-- 主要内容 -->
    <el-main>
      <h1></h1>
      <!-- 面包屑 -->
      <div class="pageInfo">
        <h1 id="pageTitle">{{ pageTitle }}</h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item, index) in pathName" :key="index">
            <router-link :to="item.path">{{ item.name }}</router-link>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <router-view></router-view>

    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          title: "渠道管理",
          id: 1,
          children: [
            {
              title: "渠道列表",
              id: 1 - 1,
              path: "/channelList"
            }
          ]
        },
        {
          title: "订单管理",
          id: 2,
          children: [
            {
              title: "订单列表",
              id: 2 - 1,
              path: "/ordersList"
            },
            {
              title: "退款",
              id: 2 - 2,
              path: "/refund"
            },
            {
              title: "佣金管理",
              id: 2 - 3,
              path: "/commissio"
            }
          ]
        },
        {
          title: "财务管理",
          id: 3,
          children: [
            {
              title: "财务列表",
              id: 3 - 1,
              path: "/financialList"
            },
            {
              title: "出账",
              id: 3 - 2,
              path: "/outAccounting"
            }
          ]
        },
        {
          title: "套餐管理",
          id: 4,
          children: [
            {
              title: "套餐组",
              id: 4 - 1,
              path: "/comboGroup"
            },
            {
              title: "套餐列表",
              id: 4 - 2,
              path: "/comboList"
            },
            {
              title: "套餐分配",
              id: 4 - 3,
              path: "/comboAllocation"
            }
          ]
        },
        {
          title: "卡片管理",
          id: 5,
          children: [
            {
              title: "卡片列表",
              id: 5 - 1,
              path: "/cardList"
            },
            {
              title: "批量任务",
              id: 5 - 2,
              path: "/cardTask"
            }
          ]
        }
      ],
      activePath: "",
      pathName: [],
      pageTitle: '',
      routerPath: [],
    };
  },
  methods: {
    getActivePathIndex() {
      var path = window.location.hash.replace("#", "");
      this.activePath =  this.$route.path
      if (path === "graphic") {
        this.activePath = "home";
      }
    },
  },
  mounted() {
    this.getActivePathIndex();
    this.pathName = this.$route.matched;
    this.pageTitle = this.$route.meta.title
    this.routerPath = JSON.parse(localStorage.getItem('routerPath')).children[0].children
  },
  watch: {
    $route(to, from) {
      var path = to.path;
      if (path === "graphic") {
        this.activePath = "home";
      }
      this.pathName = to.matched;
      this.pageTitle = this.$route.meta.title
    },

  },
};
</script>

<style lang="less" scoped>
.el-main {
  width: 100%;
  height: 100%;
  background-color: #ecf0f5;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;

  a {
    color: rgba(163, 175, 183, 0.9);
  }
}

.pageInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;

  h1 {
    font-weight: 500;
    color: black;
    font-size: 20px;
  }
}
</style>